<template>
  <DetailBox :title="getRouteTitle()" :border="2">
    <template #center>
      <slot name="center">
        <ContentBox :title="'基础表'" :border="3" :marginHeight="192">
          <template #center>
            <slot name="center">

              <el-form class="Z" :model="form" label-width="120px">
                <el-form-item label="Activity name">
                  <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="Activity zone">
                  <el-select v-model="form.region" placeholder="please select your zone">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
                <el-form-item label="Activity time">
                  <el-col :span="11">
<!--                    <el-dateTime-picker-->
<!--                        v-model="form.date1"-->
<!--                        value-format="yyyy-MM-dd HH:mm:ss"-->
<!--                        placeholder="选择时间"-->
<!--                        style="width: 100%"-->
<!--                    />-->
                    <el-date-picker
                        popper-class="date-popper"
                        v-model="form.date1"
                        type="datetime"
                        placeholder="Select date and time"
                    />
                  </el-col>
                  <el-col :span="2" class="text-center">
                    <span class="text-gray-500">-</span>
                  </el-col>
                  <el-col :span="11">
                    <el-time-picker
                        v-model="form.date2"
                        placeholder="Pick a time"
                        style="width: 100%"
                    />
                  </el-col>
                </el-form-item>
                <el-form-item label="Instant delivery">
                  <el-switch v-model="form.delivery" />
                </el-form-item>
                <el-form-item label="Activity type">
                  <el-checkbox-group v-model="form.type">
                    <el-checkbox label="Online activities" value="1" name="type" />
                    <el-checkbox label="Promotion activities" value="2" name="type" />
                    <el-checkbox label="Offline activities" value="3" name="type" />
                    <el-checkbox label="Simple brand exposure" value="4" name="type" />
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="Resources">
                  <el-radio-group v-model="form.resource">
                    <el-radio label="Sponsor" value="Sponsor" />
                    <el-radio label="Venue" value="Venue" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="Activity form">
                  <el-input v-model="form.desc" type="textarea" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">Create</el-button>
                  <el-button>Cancel</el-button>
                </el-form-item>
              </el-form>

            </slot>
          </template>
        </ContentBox>
      </slot>
    </template>
  </DetailBox>

</template>
<script lang="ts" setup>
import {reactive, ref} from 'vue'
// import { getArticleList } from '@/api/article'
import DetailBox from "@/views/components/DetailBox.vue";
import ContentBox from "@/views/components/ContentBox.vue";
import {getRouteTitle} from "@/utils";

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: 'Sponsor',
  desc: '',
})

const onSubmit = () => {
  console.log('submit!')
}


</script>
<style lang="scss">

</style>
